<template>
    <div class="w-full h-full flex flex-col">
        <div class="w-full flex flex-row justify-between">
            <div class="flex flex-row   w-w1/5">
                <el-input placeholder="请输入名称" clearable prefix-icon="el-icon-search" v-model="s_assess.str_assess_name"
                    @clear="action_list_assess">
                </el-input>
                <el-button type="primary" class=" bg-cmain_hover ml-w10" @click="action_list_assess">搜索</el-button>
            </div>
            <el-button type="primary" class=" bg-cmain_hover ml-w10" icon="el-icon-plus"
                @click="dialog_add_assess = true; dialog_data = null">添加测评量表</el-button>
        </div>
        <div class="w-full h-full mt-w20 ">
            <el-table :data="s_assess.list_assess" stripe style="width: 100%; " height="700">
                <el-table-column type="index" label="序号" min-width="5%">
                </el-table-column>
                <el-table-column prop="logo" label="图片" min-width="10%">
                    <template slot-scope="scope">
                        <el-image style="width: 117px; height: 55px" :src="scope.row.logo" lazy
                            :preview-src-list="scope.row.logoList">
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="量表名称" min-width="15%">
                </el-table-column>
                <el-table-column prop="english" label="英文名称" min-width="10%">
                </el-table-column>
                <el-table-column label="答案类型" min-width="10%">
                    <template slot-scope="scope">
                        <span>{{ scope.row.option == 1 ? '数字（1、）'
                            : '字母（A、）'
                            }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="二维码" min-width="15%">
                    <template slot-scope="scope">
                        <el-image class=" w-w80 h-w80" :src="scope.row.erCodeUrl"
                            :preview-src-list="[scope.row.erCodeUrl]">
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column label="量表介绍" min-width="5%">
                    <template slot-scope="scope">
                        <el-popover placement="bottom" width="300" trigger="click" :content="scope.row.introduce">
                            <el-button slot="reference" type="text">查看介绍</el-button>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="量表描述" min-width="5%">
                    <template slot-scope="scope">
                        <el-popover placement="bottom" width="300" trigger="click"
                            :content="scope.row.guide ? scope.row.guide : '暂无描述'">
                            <el-button slot="reference" type="text">查看描述</el-button>
                        </el-popover>
                    </template>
                </el-table-column>

                <el-table-column label="操作" min-width="10%">
                    <template slot-scope="scope">
                        <el-dropdown trigger="click" @command="action_assess_item_click($event, scope.row)">
                            <el-button type="text">
                                更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="1">问题管理
                                </el-dropdown-item>
                                <el-dropdown-item command="2">规则管理
                                </el-dropdown-item>
                                <el-dropdown-item command="3">修改量表
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
            <div class="w-full flex items-end justify-center" style="height:7%">
                <el-pagination background layout="prev, pager, next" :total="s_assess.m_page.total"
                    :page-size="s_assess.m_page.limit" @current-change="action_page_change">
                </el-pagination>
            </div>
        </div>
        <UiDialogAddAssess :data="dialog_data" :is_showDialog="dialog_add_assess"
            @nydialog_closed="dialog_add_assess = false" @nydialog_submit="action_add_assess">
        </UiDialogAddAssess>
    </div>
</template>

<script src="./Index.ts"></script>
<style src="./Index.less" lang="less" scoped></style>
